<template>
  <div :style="{ height: '250px' }">
    <div
      v-if="sourceList && sourceList.length"
      :key="ukey"
      :id="'line-' + ukey"
      :style="{ height: '250px' }"
    >
    </div>
    <div v-else>
      暂无相关历史数据
    </div>
  </div>
</template>

<script>
  import moment from "moment";
  import { ChartResizeMixin } from '@/mixins/ChartResizeMixin'
  import * as echarts from 'echarts';

  export default {
    name: 'StatisticsLine',
    mixins: [ChartResizeMixin],
    props: {
      ukey: {
        type: String,
        default: undefined
      },
      meter: {
        type: Object,
        default: () => ({})
      },
      sourceList: {
        type: Array,
        default: () => ([])
      }
    },
    mounted() {
      if (this.sourceList && this.sourceList.length > 0) {
        this.drawLineChart();
      }
    },
    watch: {
      sourceList(val) {
        if (val) {
          this.drawLineChart()
        }
      }
    },
    methods: {
      drawLineChart() {
        if (!(this.sourceList && this.sourceList.length)) {
          return false;
        }
        const chartDom = document.getElementById('line-' + this.ukey)
        const echartInstance = echarts.getInstanceByDom(chartDom)
        if (!echartInstance) {
          this.chart = echarts.init(chartDom)
        }
        const option = {
          title: {
            // show: false,
            text: this.meter.name,
            left: 'center',
            textStyle: {
              color: '#6B6B6B',
              fontWeight: 600,
              fontSize: 14
            }
          },
          color: ['#d88273', '#bf444c', '#f6efa6'],
          tooltip: {
            trigger: 'axis',
            formatter: '{a} <br /> {b}: {c}' + this.meter.unit
          },
          grid: {
            left: '5%',
            right: '4%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.sourceList.map(item => moment(item.time).format("MM-DD HH:mm:ss")),
          },
          yAxis: {
            name: '',
            type: 'value',
            nameLocation: "end",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#dddddd"
              },
            },
            // axisLine: {
            //   lineStyle: {
            //     color: "#0784D3"
            //   }
            // },
          },
          series: [{
            name: this.meter.name,
            type: 'line',
            data: this.sourceList.map(item => item.value),
            smooth: 1,
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#d88273' // 0% 处的颜色
                }, {
                  offset: .5,
                  color: '#bf444c'
                }, {
                  offset: 1,
                  color: '#f6efa6' // 100% 处的颜色
                }],
              }
            }
          }],
        }

        this.chart.setOption(option)
      }
    }
  }
</script>